<template>
  <div>
    <Back :title=" $t('AddNet_addNetwork')"></Back>
    <el-form :model="form" ref="ruleForm" label-width="130px" class="demo-ruleForm" style="padding: 10px 10px 1px 10px; margin-top: 20px">
      <el-form-item :label=" $t('AddNet_networkName')" prop="name">
        <el-input v-model.trim="form.name" :placeholder="  $t('AddNet_plsInputNetworkName')"></el-input>
      </el-form-item>
    </el-form>

    <el-form :model="form" ref="ruleForm" label-width="130px" class="demo-ruleForm from">
      <div class="title">
         {{$t('AddNet_driverSettings')}}
      </div>
      <el-form-item :label="$t('AddNet_driver')" prop="Driver" v-if="systeminfo">
        <el-select v-model.trim="form.Driver" placeholder="$t('AddNet_plsSelectDriver') ">
          <el-option :label="item" :value="item" v-for="item in systeminfo.Plugins.Network" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label=" $t('AddNet_driverOptions')" prop="isSynchronize">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort"> {{ $t('AddNet_add')}}</el-button>
      </el-form-item>
      <el-form-item label="" prop="options" v-for="(item, index) in portNum" :key="item">
        <el-input :placeholder=" $t('AddNet_plsInputName')" v-model.trim="form.options[index].name" style="width: 40%;">
          <template slot="prepend">name</template>
        </el-input>
        <el-input :placeholder=" $t('AddNet_plsInputValue')" v-model.trim="form.options[index].value" style="width: 40%;margin-left: 20px;">
          <template slot="prepend">value</template>
        </el-input>
        <el-button @click="delPort(item, index)" :title=" $t('AddNet_delete')" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>
    </el-form>

    <el-form :model="form" ref="ruleForm" label-width="100px" class="demo-ruleForm from">
      <div class="title">
          {{$t('AddNet_networkConfig')}}
      </div>
      <div class="flexbox">
        <el-form-item :label=" $t('AddNet_subNetwork')" style="width: 50%; flex-shrink: 0;">
          <el-input v-model.trim="form.Subnet" :placeholder="$t('AddNet_ziwang')"></el-input>
        </el-form-item>
        <el-form-item :label=" $t('AddNet_gateway')" style="width: 50%; flex-shrink: 0;">
          <el-input v-model.trim="form.Gateway" :placeholder="$t('AddNet_wangguan')"></el-input>
        </el-form-item>
        <el-form-item :label=" $t('AddNet_IPRange')" style="width: 50%; flex-shrink: 0;">
          <el-input v-model.trim="form.IPrange" :placeholder="$t('AddNet_ipfanwei')"></el-input>
        </el-form-item>
        <el-form-item :label=" $t('AddNet_excludeIP')" style="width: 50%; flex-shrink: 0;">
          <el-input v-model.trim="form.ExcludeIPs" :placeholder="$t('AddNet_paichuip')"></el-input>
        </el-form-item>
      </div>
    </el-form>

    <el-form :model="form" ref="ruleForm" label-width="130px" class="demo-ruleForm from">
      <div class="title">
        {{  $t('AddNet_advancedSetting')}}
      </div>
      <el-form-item :label=" $t('AddNet_addLabel')" prop="isSynchronize">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addLabel">添加</el-button>
      </el-form-item>
      <el-form-item :label=" $t('AddNet_plsInputKey')" prop="label" v-for="(item, index) in labelNum" :key="item">
        <el-input :placeholder="$t('AddNet_plsInputKey')" v-model.trim="form.labels[index].name" style="width: 40%;">
          <template slot="prepend">name</template>
        </el-input>
        <el-input placeholder="$t('AddNet_plsInputValue')" v-model.trim="form.labels[index].value" style="width: 40%;margin-left: 20px;">
          <template slot="prepend">value</template>
        </el-input>
        <el-button @click="delLabel(item, index)" title="$t('AddNet_delete')" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>
      <el-form-item :label=" $t('AddNet_limitExternalAccess')">
        <el-switch v-model.trim="form.Internal"></el-switch>
      </el-form-item>
      <el-form-item :label=" $t('AddNet_enableManualContainerAccessories') ">
        <el-switch v-model.trim="form.Attachable"></el-switch>
      </el-form-item>
    </el-form>

    <el-form :model="form" ref="ruleForm" label-width="50px" class="demo-ruleForm" style="padding: 10px 10px 1px 10px">
      <el-form-item label="">
        <el-button style="background: #067FB5; color: #fff;" size="small" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Input, Button, Switch, Select, Option } from 'element-ui'
import post from '@/utils/post'
import Back from '@/components/Back'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Option)

export default {
  data () {
    return {
      systeminfo: null, // 系统参数
      form: {
        name: '', // 网络名
        Driver: 'bridge', // 网络驱动
        options: [], // 驱动选项
        Subnet: '', // 子网
        Gateway: '', // 网关
        IPrange: '', // ip范围
        ExcludeIPs: '', // 限制ip
        labels: [], // 标签
        Internal: false, // 限制外部访问网络
        Attachable: false // 启动手动容器附件
      },
      // 动态添加驱动选项
      portNum: [],
      i: 0,
      // 动态添加标签
      labelNum: [],
      j: 0
    }
  },
  mounted () {
    // 请求关于系统的数据
    const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/info"'
    post({ docker }, (res) => {
      this.systeminfo = res
    }, this)
  },
  methods: {
    // 添加开options的input框
    addPort () {
      this.portNum.push(this.i)
      this.form.options.push({ name: '', value: '' })
      this.i++
    },
    // 删除options的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.form.options.splice(index, 1)
    },

    // 添加开label的input框
    addLabel () {
      this.labelNum.push(this.j)
      this.form.labels.push({ name: '', value: '' })
      this.j++
    },
    // 删除lavel的input框
    delLabel (item, index) {
      this.labelNum = this.labelNum.filter(data => {
        return data !== item
      })
      this.form.labels.splice(index, 1)
    },
    // 处理创建
    onSubmit () {
      let Config = [{}]
      if (this.form.Subnet) {
        Config[0].Subnet = this.form.Subnet
      }
      if (this.form.Gateway) {
        Config[0].Gateway = this.form.Gateway
      }
      if (this.form.IPrange) {
        Config[0].IPRange = this.form.IPrange
      }
      if (this.form.ExcludeIPs) {
        Config[0].AuxAddress = this.form.ExcludeIPs
      }
      let Labels = {}
      if (this.form.labels.length > 0) {
        for (let i = 0; i < this.form.labels.length; i++) {
          Labels[this.form.labels[i].name] = this.form.labels[i].value
        }
      }
      let Options = {}
      if (this.form.options.length > 0) {
        for (let j = 0; j < this.form.options.length; j++) {
          Options[this.form.options[j].name] = this.form.options[j].value
        }
      }
      let data = {
        CheckDuplicate: true,
        Driver: this.form.Driver,
        Attachable: this.form.Attachable,
        IPAM: {
          Config,
          Driver: 'default'
        },
        Internal: this.form.Internal,
        Labels,
        Name: this.form.name,
        Options
      }
      const docker = `curl --unix-socket /var/run/docker.sock -s -H Content-Type:application/json -d '${JSON.stringify(data)}' http:/v1.40/networks/create` // 创建网络
      post({ docker }, res => {
        if (res.message) {
          return this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message: this.$t('AddNet_networkCreateSuccess'),
          type: 'success'
        })
        this.$router.go(-1)
      }, this)
    }
  },
  components: {
    Back
  }
}
</script>

<style lang="scss" scoped>
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 0px 10px;
  margin: 20px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
.flexbox{
  display: flex;
  flex-wrap: wrap;
}
</style>
